<template>
  <div class="digital-cockpit">
    <!-- 顶部导航 -->
    <van-nav-bar
        title="基本信息"
        left-arrow
        @click-left="goBack"
        class="nav-bar"
    />

    <!-- 内容区域 -->
    <div class="content">
      <!-- 信息卡片 - 注意：Vant2的Card组件需要使用slot="content" -->
      <div class="info-card">
        <div slot="content">
          <div class="header-info">
          <div class="title-container">
            <van-icon name="play" class="title-icon" style="font-size: 22px;margin-top: 3px;"/>
            <h2 class="title">{{ selectedItem.name || '运行日报数字人' }}</h2>
          </div>
          <van-tag class="creator-tag">
            <van-icon name="user-o" class="tag-icon" />
            创建人: {{ selectedItem.realname || '陈亮' }}
          </van-tag>
            </div>

          <!-- 信息列表 -->
          <ul class="info-list">
            <li class="info-item">
              <span class="label">能力类型</span>
              <span class="value">{{ showtype(selectedItem.type) || '无'  }}</span>
            </li>
            <li class="info-item">
              <span class="label">创建时间</span>
              <span class="value">{{ showtime(selectedItem.creationtime) || '无'  }}</span>
            </li>
            <li class="info-item">
              <span class="label">来源</span>
              <span class="value">{{ selectedItem.source || '无' }}</span>
            </li>
            <li class="info-item" v-if="selectedItem.type === 'api'">
              <span class="label">调度方式</span>
              <span class="value">{{ selectedItem.schedulingmode || '无' }}</span>
            </li>
            <li class="info-item" v-if="selectedItem.type === 'api'">
              <span class="label">请求类型</span>
              <span class="value">{{ selectedItem.requesttype || '无' }}</span>
            </li>
            <li class="info-item" v-if="selectedItem.type === 'api'">
              <span class="label">请求地址</span>
              <span class="value url-value">{{ selectedItem.url || '无' }}</span>
            </li>
            <li class="info-item" v-else>
              <span class="label">APIID</span>
              <span class="value url-value">{{ selectedItem.apiid || '无' }}</span>
            </li>

            <!-- 添加类型检查，避免undefined错误 -->
            <li class="info-item" v-if="selectedItem.type === 'api' && selectedItem.founder && selectedItem.founder === $store.getters.userid">
              <span class="label">参数</span>
              <span class="value url-value"><pre>{{ formatParams(selectedItem.content) || '无' }}</pre></span>
            </li>
            <li class="info-item" v-if="selectedItem.type === 'api' && selectedItem.founder && selectedItem.founder === $store.getters.userid">
              <span class="label">请求头</span>
              <span class="value url-value"><pre>{{ formatHeaders(selectedItem.content) || '无' }}</pre></span>
            </li>
            <li class="info-item" v-if="selectedItem.type === 'api'">
              <span class="label">通知方式</span>
              <span class="value">{{ formatType(selectedItem.type2) || '无' }}</span>
            </li>
          </ul>

          <!-- 能力描述 -->
          <div class="description-container">
            <span class="description-label">能力描述：</span>
            <p class="description-content">{{ selectedItem.description || '无' }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      selectedItem: {},
      selectedId: '',
      detailActiveKey: '',
    }
  },
  mounted() {
    // 从路由参数获取数据
    const item = this.$route.params;
    this.selectedItem = item;
    this.selectedId = item.id || '';
    this.detailActiveKey = "能力描述";
  },
  methods: {
    goBack() {
      let param={
        activeTab:this.$route.params.activeTab
      }
      this.$router.push({name: 'test', params: param})
    },
    showtype(val){
      if(val=='agent'){
        return 'Agent'
      }else{
        return 'API接口'
      }
    },
    showtime(val){
      return val.substr(0, 10)
    },
    // 解析并格式化参数
    formatParams(content) {
      try {
        // 1. 处理输入可能是字符串或数组的情况
        let contentStr;
        if (typeof content === 'string') {
          try {
            // 尝试解析字符串内容（可能是JSON数组字符串）
            const parsed = JSON.parse(content);
            contentStr = Array.isArray(parsed) ? parsed[0] : parsed;
          } catch (e) {
            contentStr = content;
          }
        } else {
          contentStr = Array.isArray(content) ? content[0] : content;
        }
        // 2. 解析配置对象
        const config = typeof contentStr === 'string' ? JSON.parse(contentStr) : contentStr;
        // 3. 解析params字段（可能是字符串或数组）
        const paramsStr = config.params || '[]';
        const paramsArray = typeof paramsStr === 'string' ? JSON.parse(paramsStr) : paramsStr;
        // 4. 转换参数格式（保持数组值不变）
        const params = {};
        if (Array.isArray(paramsArray)) {
          paramsArray.forEach(item => {
            if (item && item.key && item.value !== undefined) {
              // 特别注意：这里不再处理数组值，直接保留原样
              params[item.key] = item.value;
            }
          });
        }
        // 5. 根据请求类型格式化
        const requestType = (config.requesttype || '').toLowerCase();
        if (requestType === 'get') {
          // GET请求特殊处理：将数组值用逗号连接
          const getParams = Object.entries(params)
              .map(([key, value]) => {
                const val = Array.isArray(value) ? value.join(',') : value;
                return `${key}=${encodeURIComponent(val)}`;
              })
              .join('&');
          console.log("GET参数:", getParams);
          return getParams;
        }

        // POST请求直接返回JSON（保持数组值）
        const postParams = JSON.stringify(params, null, 2);
        console.log("POST参数:", postParams);
        return postParams;
      } catch (e) {
        console.error('格式化参数出错:', e);
        return typeof content === 'string' ? content : JSON.stringify(content, null, 2);
      }
    },
    formatHeaders(content) {
      try {
        // 1. 解析最外层字符串（包含数组的字符串）
        const contentArray = JSON.parse(content);
        if(contentArray== null || contentArray.length === 0) {
          console.warn("contentArray为空或未定义，返回空对象");
          return JSON.stringify({});
        }
        // 2. 取出数组中的第一个元素（JSON字符串）
        const jsonString = contentArray[0];
        // 3. 解析为配置对象
        const config = JSON.parse(jsonString);
        // 4. 获取header字符串（注意：它本身是JSON字符串）
        const headerStr = config.header;
        // 5. 解析header数组
        const headerArray = JSON.parse(headerStr);
        // 6. 转换为headers对象
        const headers = {};
        headerArray.forEach(item => {
          if (item.value && item.price) {
            headers[item.value] = item.price;
          }
        });
        return JSON.stringify(headers, null, 2);
      } catch (e) {
        console.error('处理过程中出错:', e);
        return `错误: ${e.message}`;
      }
    },

    formatType(content){
      var value=JSON.parse(content)
      var result=""
      for(var i=0;i<value.length;i++) {
        if (i == value.length - 1) {
          result += value[i]
        } else {
          result += value[i] + ","
        }
      }
      return result
    },
  }
}
</script>

<style scoped>
::v-deep .van-nav-bar__content{
  background: #F4FCFF;
}
.digital-cockpit{
  background: linear-gradient(180deg, #F4FCFE, #fff);
  /*background-color: #f7f8fa;*/
  min-height: 100vh;
}
.content {
  padding: 16px;
  background: linear-gradient(180deg, #F4FCFE, #fff);
  /*background-color: #f4f8f9;*/
  min-height: calc(100vh - 46px);
}

/* 头部信息样式 */
.header-info {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.title-container {
  display: flex;
  align-items: center;
}

.title-icon {
  color: #27C2AD;
  font-size: 20px;
  margin-right: 8px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.creator-tag {
  background-color: white;
  color: #27C2AD;
  border: 1px solid #27C2AD;
  border-radius: 20px;
  padding: 4px 8px;
  font-size: 14px;
}

.tag-icon {
  font-size: 12px;
  margin-right: 4px;
}

/* 信息卡片样式 */
.info-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 信息列表样式 */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  width: 100px;
  color: #999;
  font-size: 14px;
}

.value {
  flex: 1;
  color: #333;
  font-size: 14px;
  text-align: left;
}

.url-value {
  color: #1890ff;
  word-break: break-all;
}

/* 能力描述样式 */
.description-container {
  padding: 16px;
  border-top: 1px solid #f5f5f5;
}

.description-label {
  color: #999;
  font-size: 14px;
  display: inline-block;
  margin-bottom: 8px;
}

.description-content {
  color: #333;
  font-size: 14px;
  margin: 0;
  padding: 12px;
  background-color: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
  min-height: 60px;
  line-height: 1.5;
}

/* 适配不同屏幕 */
@media (max-width: 375px) {
  .label {
    width: 90px;
  }

  .header-info {
    flex-direction: column;
  }

  .creator-tag {
    margin-top: 8px;
    align-self: flex-start;
  }
}
</style>
